<template>
    <div class="container-box taskList">
        <div style="height: 98px;"></div>
        <!-- serch -->
        <div class="bgfffs filter_box" :style="contentStyleObj">
            <page-filter :className="className" lableWidth="70px" ref="from" :query.sync="filterInfo.query"
                :filter-list="filterInfo.list" :list-type-info="listTypeInfo" @handleClick="handleClick"
                @handleEvent="handleEvent" @upenter="upenter">
            </page-filter>
        </div>

        <div class="bgfff">
            <div class="btn-div" style="margin-left: 10px;">
                <el-button class="btn-middle" type="primary" @click="confirmBill" :disabled="isBill"
                    size="mini">批量发起对账</el-button>
                <el-button class="btn-middle" type="primary" @click.native="enterprisePayment"
                    size="mini">企业付款统计</el-button>
                <el-button class="btn-middle" type="primary" @click="confirmAccount" :disabled="isAccount"
                    size="mini">批量确认对账</el-button>
            </div>
            <div class="tableHeight" ref="tableWrapper" style="padding: 10px 10px">
                <page-table :checkBox="true" ref="table" :tabIndex="true" :dataText="dataText" showRow="billPage"
                    v-loading="loading" :init-curpage="tableInfo.initCurpage" :data.sync="tableInfo.data"
                    :pageParm="pageParm" :query="filterInfo.query" :field-list="tableInfo.fieldList"
                    :list-type-info="listTypeInfo" :showSummary="showSummary" :getSummaries="getSummaries"
                    :handle="tableInfo.handle" @handleClick="handleClick" @handleEvent="handleEvent">
                    <template v-slot:col-freight="scope">
                        <div slot="reference" style="cursor: pointer;color: #409eff;" @click="modifyFreight(scope.row)"
                            v-if="scope.row.freight != 0 && scope.row.bill_status == 10">
                            {{ scope.row.freight }}
                            <i class="el-icon-edit"></i>
                        </div>
                        <div slot="reference" v-else-if="scope.row.freight != 0 && scope.row.bill_status != 10">
                            {{ scope.row.freight }}
                        </div>
                        <div v-else>-</div>
                    </template>
                    <template v-slot:col-other_freight="scope">
                        <div slot="reference" style="cursor: pointer;color: #409eff;" @click="mixedCost(scope.row)"
                            v-if="scope.row.other_freight != 0">
                            {{ scope.row.other_freight }}
                            <i class="el-icon-s-order"></i>
                        </div>
                        <div v-else style="cursor: pointer;color: #409eff;" @click="mixedCost(scope.row)">
                            -<i class="el-icon-s-order"></i></div>
                    </template>

                    <!-- 子表格 -->
                    <!-- <template v-slot:col-child="scope">
                        <template>
                            <page-table keys="receivable_id" class="receivable" :tabIndex="false" :pager="false"
                                :data.sync="scope.row.order_list" :query="filterInfo.query"
                                :field-list="tableInfo.fieldList2" :list-type-info="listTypeInfo"
                                @handleClick="handleClick" @handleEvent="handleEvent">
                                <template v-slot:col-freight="scope">
                                    <div slot="reference" style="cursor: pointer;color: #409eff;"
                                        @click="modifyFreight(scope.row)"
                                        v-if="scope.row.freight != 0 && scope.row.bill_status == 10">
                                        {{ scope.row.freight }}
                                        <i class="el-icon-edit"></i>
                                    </div>
                                    <div slot="reference"
                                        v-else-if="scope.row.freight != 0 && scope.row.bill_status != 10">
                                        {{ scope.row.freight }}
                                    </div>
                                    <div v-else>-</div>
                                </template>
                                <template v-slot:col-other_freight="scope">
                                    <div slot="reference" style="cursor: pointer;color: #409eff;"
                                        @click="mixedCost(scope.row)" v-if="scope.row.other_freight != 0">
                                        {{ scope.row.other_freight }}
                                        <i class="el-icon-s-order"></i>
                                    </div>
                                    <div v-else style="cursor: pointer;color: #409eff;" @click="mixedCost(scope.row)">
                                        -<i class="el-icon-s-order"></i></div>
                                </template>
                            </page-table>
                        </template>
                    </template> -->
                </page-table>
            </div>
        </div>
        <page-dialog :class="{ 'dialogCss': dialogInfo.type == 'billInfo' }" :title="dialogInfo.title[dialogInfo.type]"
            :visible.sync="dialogInfo.visible" :width="dialogInfo.width" :bt-loading="dialogInfo.btLoading"
            :bt-list="dialogInfo.type == 'mixedCostDetail' ? dialogInfo.btList2 : dialogInfo.btList" shutEvent="close"
            @handleClick="handleClick" @handleEvent="handleEvent">
            <template v-slot>
                <div v-if="dialogInfo.type == 'modifyTaxRadio'">
                    <el-form label-position="left" :inline="false" class="driverTable_form" label-width="110px">
                        <el-form-item label="提单号：">
                            {{ modifyTaxRadioForm.bill_lading_number }}
                        </el-form-item>
                        <el-form-item label="箱型数量：">
                            {{ modifyTaxRadioForm.container_number }}
                        </el-form-item>
                        <el-form-item label="运费：">
                            {{ modifyTaxRadioForm.freight }} 元
                        </el-form-item>
                        <el-form-item label="税率：">
                            {{ modifyTaxRadioForm.tax_ratio_txt }}
                        </el-form-item>
                        <el-button class="btn-middle" type="info" style="font-size: xx-small;"
                            @click="taxRadio">修改税率</el-button>
                        <span style="color: red; font-size: 12px; margin-left: 10px;">*修改税率会影响运费的价格</span>
                        <div v-if="is_modify_tax == 1" style="font-size: 12px;">
                            <div style="margin-top: 30px"><span style="color: red;">*</span>修改税率：
                                <el-select v-model="modifyTaxRadioForm.tax_ratio"
                                    style="width: 200px; height: 30px; font-size: 12px;" placeholder="请选择修改税率" clearable
                                    @change="changeTax">
                                    <el-option v-for="item in modifyTaxRatio" :key="item.key" :label="item.value"
                                        :value="{ id: item.key, value: item.value }">
                                    </el-option>
                                </el-select>
                            </div>
                            <div style="margin-top: 30px;margin-left: 32px;">运费：
                                {{ modifyTaxRadioForm.modify_freight }}
                            </div>
                        </div>
                    </el-form>
                </div>
                <!-- 修改运杂费 -->
                <div v-if="dialogInfo.type == 'mixedCost'">
                    <el-table :data="tabItemList" border ref="tabItemList" v-loading="loading" :header-cell-style="{
                        background: 'rgba(238,241,246,1)',
                        fontSize: '12px'
                    }" class="toppp-table" style="width: 100%; font-size: 12px">

                        <el-table-column type="index" align="center" label="序号" width="50">
                        </el-table-column>

                        <el-table-column align="center" prop="field_name" label="名称">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.field" clearable placeholder="请选择"
                                    @change="(sysCode) => changesyscode(sysCode, scope.$index)">
                                    <el-option v-for="(item) in field_list" :key="item.field" :label="item.field_name"
                                        :value="item.field">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="amount" label="费用" width="120">
                            <template slot-scope="scope">
                                <el-input style="font-size: 12px;" v-model="scope.row.amount"
                                    oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="type" label="归属人" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.type == 0">
                                    司机
                                </span>
                                <span v-else>平台</span>
                            </template>
                            <!-- <template slot-scope="scope">
                            <el-select v-model="scope.row.type" clearable placeholder="请选择">
                                <el-option label="接单人" :value="0"></el-option>
                                <el-option label="平台" :value="1"></el-option>
                            </el-select>
              </template> -->
                        </el-table-column>
                        <el-table-column align="center" prop="value" label="图片" width="120">

                            <template slot-scope="scope">
                                <div v-if="scope.row.value != '' && scope.row.value != null && scope.row.value != 'null'"
                                    style="display: flex; justify-content: center;">
                                    <el-image :src="scope.row.value" alt="图片" class="square-image"
                                        :preview-src-list="[scope.row.value]"
                                        style="width: 60px; height: 48px;"></el-image>
                                    <i style="font-size: 15px; color: red; cursor: pointer;"
                                        @click="delImageTwo(scope.row)" class="el-icon-delete"></i>
                                </div>
                                <div v-else class="table_avatar">
                                    <el-upload class="avatar-uploader" action="" :show-file-list="false"
                                        :http-request="goRequest"
                                        :before-upload="(file) => beforeAvatarUpload(file, scope.row)">
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </template>

                        </el-table-column>

                        <el-table-column label="操作" align="center" width="100">
                            <template slot-scope="scope">
                                <i v-if="scope.$index === tabItemList.length - 1" @click="addTableRow"
                                    style="font-size: 20px;" class="el-icon-circle-plus"></i>
                                <i v-if="tabItemList.length > 1" @click="removeTableRow(scope.$index)"
                                    style="font-size: 20px;" class="el-icon-remove"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 运杂费明细 -->
                <div v-if="dialogInfo.type == 'mixedCostDetail'">
                    <el-table :data="tabItemList2" border ref="tabItemList2" v-loading="loading" :header-cell-style="{
                        background: 'rgba(238,241,246,1)',
                        fontSize: '12px'
                    }" class="toppp-table" style="width: 100%; font-size: 12px">

                        <el-table-column type="index" align="center" label="序号" width="50" key="序号1">
                        </el-table-column>

                        <el-table-column align="center" prop="field_name2" key="名称1" label="名称">
                        </el-table-column>
                        <el-table-column align="center" prop="amount2" key="费用1" label="费用">
                        </el-table-column>
                        <el-table-column align="center" prop="type2" key="归属1" label="归属人">
                            <template slot-scope="scope">
                                <span v-if="scope.row.type2 == 0">
                                    司机
                                </span>
                                <span v-else>平台</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="value2" label="图片" width="100" key="图片1">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.value2" alt="图片" class="square-image"
                                    :preview-src-list="[scope.row.value2]" style="width: 60px; height: 48px;">
                                    <div slot="error" class="demo-image__error">暂无图片</div>
                                </el-image>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 修改运费 -->
                <div v-if="dialogInfo.type == 'modifyFreight'">
                    <div>当前运费：{{ freight }} 元</div>
                    <div style="margin-top: 30px"><span style="color: red;">*</span>修改运费：
                        <el-input v-model="form.amount" oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
                            style="width: 180px" placeholder="请输入修改运费" maxlength="10"></el-input>
                    </div>
                    <div style="margin-top: 30px;margin-left: 6px;">修改原因：
                        <el-input v-model="form.reason" style="width: 180px" placeholder="请输入修改原因"
                            maxlength="100"></el-input>
                    </div>
                </div>
                <!-- 发起对账 -->
                <div v-if="dialogInfo.type == 'confirmBill'">
                    <div class="picker" style="margin-top: 30px">对账月份：
                        <el-date-picker v-model="settlement_time" type="month" format="yyyy年M月" value-format="yyyy-MM"
                            placeholder="请选择对账月份" size="medium">
                        </el-date-picker>
                    </div>
                </div>
                <!-- 确认对账 -->
                <div v-if="dialogInfo.type == 'confirmAccount'">
                    <div class="picker" style="margin-top: 30px">对账月份：
                        <el-date-picker v-model="settlement_time" type="month" format="yyyy年M月" value-format="yyyy-MM"
                            placeholder="请选择对账月份" size="medium">
                        </el-date-picker>
                    </div>
                </div>
            </template>
        </page-dialog>
    </div>
</template>

<script>
import PageDialog from "@/components/PageDialog";
import PageFilter from "@/components/PageFilter/index";
import PageTable from "@/components/PageTable/index";
import { formatter } from "@/utils/index";
import axios from "axios"; //引入axios
import {
    billList,// 列表
    getParam,// 基础参数
    modifyRate, //修改税率
    modifyFreight, //修改运费
    sendAmount,//发起对账
    modifyMixedFreight,//修改运杂费
    getMixedParam,//修改运杂费获取基础参数
    userList,//接单人
    confirmAccount,//确认对账
} from '@/api/bill';
import {
    fileUpload,// 照片上传
} from '@/api/api'
export default {
    name: "billPage",
    components: {
        PageFilter,
        PageDialog,
        PageTable
    },
    data () {
        return {
            rules: {
            },
            tabItemList: [],
            tabItemList2: [],
            account: [],
            id: null,
            fullYear: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            loading: false,
            is_modify_tax: 0,
            amount_freight_total: 0.00,
            amount_other_freight_total: 0.00,
            amount_to_total: 0.00,
            billLading: '',
            addId: [],
            payId: [],
            allInfo: [],
            dataText: "",
            enter: {},
            showSummary: false,
            isBill: true,
            isAccount: true,
            contentStyleObj: {
                height: "100%"
            },
            refresh: false,
            form: {
                order_id: "",
                amount: "",
                reason: ""
            },
            freight: "",
            settlement_time: '',//对账月份
            field_list: [],//费用列表
            mixedCostForm: {
                order_id: "",
                tc_id: [],
                need_info: '',
            },
            modifyTaxRadioForm: {
                id: "",
                invoice_type_id: 0,
                invoice_type_name: '',
                invoice_tax_ratio: '',
                origin_tax_ratio: "",
                tax_ratio: '',
                modify_freight: ""
            },
            modifyTaxRatio: [],//修改税率可选项

            showInvoice: false,
            showReconciliation: false,
            record: false,
            recordTableData: {},
            className: "forms",
            // 相关列表
            listTypeInfo: {
                group_id_list: [],//发布企业
                bill_status_list: [], //任务状态
                invoice_class: [], //发票税率
                user_id_list: [],//接单人
            },

            // 弹窗相关
            dialogInfo: {
                width: "400px",
                title: {
                    modifyTaxRadio: "修改税率",
                    mixedCost: "修改运杂费",
                    confirmBill: "发起对账",
                    modifyFreight: "修改运费",
                    mixedCostDetail: "运杂费明细",
                    confirmAccount: "确认对账",
                },
                visible: false,
                type: "",
                btLoading: false,
                btList: [
                    {
                        label: "取消",
                        event: "close",
                        show: true
                    },
                    {
                        label: "确定",
                        type: "primary",
                        event: "save",
                        show: true
                    }
                ],
                btList2: [
                    {
                        label: "关闭",
                        event: "close",
                        show: true
                    }
                ]
            },
            // 过滤相关配置
            filterInfo: {
                query: {
                    page: 1,
                    limit: 20,
                    sort_order: "",
                    sort_field: "",
                    group_id: "", // 否 string 发布企业
                    bill_status: 10, // 否 int 任务状态
                    finish_start_time: "", //	是	date	完成起始时间
                    finish_end_time: "", //	是	date	完成终止时间
                    invoice_type_id: "", // 否 int 税率
                    bill_lading_number: "", // 否 string  提单号
                    pfid: ""
                },
                list: [
                    {
                        type: "select",
                        label: "发布企业",
                        value: "group_id",
                        list: "group_id_list",
                        key: "发布企业"
                    },
                    {
                        type: "select",
                        label: "任务状态",
                        value: "bill_status",
                        list: "bill_status_list",
                        key: "任务状态"
                    },
                    {
                        type: "select",
                        label: "司机",
                        value: "pfid",
                        list: "user_id_list",
                        key: "司机",
                        clearable: true
                    },
                    {
                        type: "timedate",
                        dateType: "date",
                        format: "yyyy-MM-dd",
                        label: "完成开始时间",
                        value: "finish_start_time",
                        clearable: false,
                        key: "完成时间"
                    },
                    {
                        type: "timedate",
                        dateType: "date",
                        format: "yyyy-MM-dd",
                        label: "完成结束时间",
                        value: "finish_end_time",
                        clearable: false,
                        key: "-"
                    },
                    {
                        type: "select",
                        label: "税率",
                        value: "invoice_type_id",
                        list: "invoice_class",
                        key: "税率"
                    },
                    {
                        type: "input",
                        label: "提单号",
                        value: "bill_lading_number",
                        key: "提单号"
                    },
                    {
                        type: "button",
                        label: "查询",
                        btType: "primary",
                        event: "search",
                        show: true
                    },
                    {
                        type: "button",
                        label: "重置",
                        // btType: "reset",
                        event: "reset",
                        show: true,
                    }
                ]
            },
            // 分页参数
            pageParm: {
                tableHeight: "52vh", // 表格最大高度
                total: 0, // 总条数
                loading: true, // 加载动画
                pagesizes: [20, 50, 100], // 分页数量列表
                query: {
                    // 查询条件
                    page: 1, // 当前页
                    limit: 20 // 每页条数
                }
            },
            // 表格相关
            tableInfo: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    // { value: "child", expand: "expand", type: "slot", fixed: true },
                    { label: "状态", value: "bill_status_txt", width: "75px", fixed: true },
                    { label: "结算方式", value: "payment_method_txt", width: "75px", fixed: true },
                    { label: "发布企业", value: "group_name", width: "100px", type: "popover", fixed: true },
                    { label: "提单号", value: "bill_lading_number", width: "120px", type: "popover", fixed: true },
                    { label: "提箱场站", value: "station_name", width: "100px" },

                    { label: "承运人", value: "real_name", width: "100px" },
                    { label: "联系电话", value: "phone", width: "100px" },
                    { label: "承运车辆", value: "car_number", width: "100px" },

                    { label: "箱型数量", value: "container_number", width: "80px", type: "popover" },
                    { label: "运费", value: "freight", width: "100px", type: "slot" },
                    { label: "运杂费", value: "other_freight", width: "100px", type: "slot" },
                    { label: "合计", value: "freight_and_other_freight", width: "100px" },
                    {
                        label: "税率",
                        value: "tax_ratio",
                        width: "50px"
                    },
                    {
                        label: "发布人",
                        value: "add_admin_name",
                        width: "80px"
                    },
                    {
                        label: "发布时间",
                        value: "add_time",

                    },

                    {
                        label: "完成时间",
                        value: "finish_time",

                    },
                ],
                handle: {
                    label: "操作",
                    width: "200px",
                    btList: [
                        {
                            label: "查看详情",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "details",
                            show: true,
                            ifRender: row => {
                                if (row) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                        {
                            label: "修改税率",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "taxRadio",
                            show: true,
                            ifRender: row => {
                                if (row.bill_status == 10) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                        {
                            label: "发起对账",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "confirm",
                            show: true,
                            ifRender: row => {
                                if (row.bill_status == 10) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        }
                    ]
                },
                fieldList2: [
                    {
                        label: "承运人",
                        value: "real_name",
                        width: "60px",
                        fixed: true
                    },
                    { label: "联系电话", value: "phone", width: "80px" },
                    { label: "承运车辆", value: "car_number", width: "90px" },
                    { label: "承运数量", value: "carrier_number", width: "70px" },
                    { label: "运费", value: "freight", width: "80px", type: 'slot' },

                    { label: "运杂费", value: "other_freight", width: "80px", type: 'slot' },
                ],
            }
        };
    },
    created () {

        this.getonemonth();
        this.init({ ...this.pageParm.query, ...this.filterInfo.query });
        this.getParamList();
        // this.getHeight();
        this.fetTableHeight()
        this.upenter();

        //window.addEventListener("resize", this.getHeight);
    },
    //enter事件 与点击查询按钮功能一致
    updated () {
        var that = this;
    },
    activated () {
        this.init(this.filterInfo.query);
        this.getParamList();
        this.upenter();
        this.refresh = false;
    },
    deactivated () {
        this.refresh = true;
    },
    filters: {
        formatter (time) {
            let date = new Date(time),
                text = "";
            if (time !== "") return (text = formatter(date, "yyyy-MM-dd hh:mm"));
            return text;
        }
    },
    computed: {
    },
    mounted () {
        // 通过遮罩层关闭图片预览
        document.addEventListener('click', function (e) {
            if (e.target.className == "el-image-viewer__mask") {
                let close = document.querySelector(".el-icon-circle-close");
                close.click();
            }
        });
    },

    methods: {
        taxRadio () {
            if (this.is_modify_tax == 0) this.is_modify_tax = 1;
            else this.is_modify_tax = 0;

        },
        changeTax (data) {
            if (data.value !== undefined) {
                let tax = data.value.charAt(0)
                let tax2 = tax
                if (tax == 1) tax = 3
                if (tax == '不') {
                    tax2 = 0
                    tax = 0
                }

                if ((this.modifyTaxRadioForm.origin_tax_ratio == 3 && tax == 1)
                    || (this.modifyTaxRadioForm.origin_tax_ratio == 1 && tax == 3)
                    || this.modifyTaxRadioForm.origin_tax_ratio == tax) {
                    this.modifyTaxRadioForm.modify_freight = this.modifyTaxRadioForm.freight
                } else {
                    let currentTax = 0
                    if (this.modifyTaxRadioForm.origin_tax_ratio > tax) {
                        currentTax = 1 - (this.modifyTaxRadioForm.origin_tax_ratio - tax) / 100
                    } else {
                        currentTax = 1 + (tax - this.modifyTaxRadioForm.origin_tax_ratio) / 100
                    }
                    this.modifyTaxRadioForm.modify_freight = (currentTax * this.modifyTaxRadioForm.freight).toFixed(2)
                }
                //this.modifyTaxRadioForm.modify_freight = ((1+tax / 100 ) * this.modifyTaxRadioForm.freight).toFixed(2),
                //this.modifyTaxRadioForm.modify_freight = (((1-this.modifyTaxRadioForm.origin_tax_ratio / 100 ) * this.modifyTaxRadioForm.freight_total) * (1+tax / 100 )).toFixed(2),
                this.modifyTaxRadioForm.invoice_type_id = data.id,
                    this.modifyTaxRadioForm.invoice_tax_ratio = tax2,
                    this.modifyTaxRadioForm.invoice_type_name = tax == 0 ? '不开票' : data.value.slice(-2)
                //this.modifyTaxRadioForm.invoice_type_name = data.value.slice(-2)
            } else {
                this.modifyTaxRadioForm.modify_freight = ''
            }
        },

        mixedCost (row) {
            if (row.bill_status == 10) {
                getMixedParam().then(res => {
                    this.field_list = res.data.need_info[0].map(v => {
                        return {
                            field: v.field,
                            field_name: v.field_name
                        }
                    })
                })
                if (row.other_freight_list.length > 0) {
                    this.tabItemList = row.other_freight_list.map(v => {
                        return {
                            field: parseFloat(v.field),
                            field_name: v.field_name,
                            amount: v.amount,
                            type: v.type,
                            value: v.value
                        }
                    })
                } else {
                    this.tabItemList.push({ field: "", field_name: "", amount: "", type: 1, value: "" });
                }
                console.log('子表格数据----', this.tabItemList)

                this.mixedCostForm.order_id = row.order_id
                this.mixedCostForm.tc_id = row.tc_id
                this.dialogInfo.width = "700px";
                this.dialogInfo.type = "mixedCost";
                this.dialogInfo.visible = true;
            } else {
                this.tabItemList2 = row.other_freight_list.map(v => {
                    return {
                        field_name2: v.field_name,
                        amount2: v.amount,
                        type2: v.type,
                        value2: v.value
                    }
                })

                this.dialogInfo.width = "600px";
                this.dialogInfo.type = "mixedCostDetail";
                this.dialogInfo.visible = true;
            }

        },
        enterprisePayment () {
            this.$router.push('/payStatPage')
        },
        // 表格新增一行
        addTableRow () {
            this.tabItemList.push({
                amount: "",
                field: '',
                field_name: "",
                format_type: "file",
                type: 1,
                value: ''
            })
        },
        // 表格删除一行
        removeTableRow (index) {

            this.tabItemList.splice(index, 1)
        },
        // 获取费用名称
        changesyscode (sysCode, index) {
            this.field_list.some(item => {
                if (item.field == sysCode) {
                    this.tabItemList[index].field_name = item.field_name
                    return true
                }
                return false
            })
        },
        // 删除费用照片
        delImageTwo (item) {
            item.value = ''
        },
        // beforeAvatarUpload (file, item) {
        //       this.loading = true
        //       let formData = new FormData();
        //       formData.append("file", file);
        //       let config = {
        //           headers: {
        //               //添加请求头
        //               "Content-Type": "multipart/form-data",
        //               "Authori-zation": "Bearer " + localStorage.getItem('token')
        //           }
        //       };
        //       let url = '/api' + '/xhy/admin/uploadFile'
        //       axios.post(url, formData, config).then(res => {
        //           this.loading = false
        //           console.log(res, '我是路径')
        //           if (res.status == 200) {
        //               let path = res.data.data.href
        //               item.value = path
        //           }
        //       }).catch(response => {
        //           this.loading = false
        //           console.log('图片上传失败')
        //       })
        //       const isLt2M = file.size / 1024 / 1024 < 4;

        //       if (!isLt2M) {
        //           this.$message.error('上传头像图片大小不能超过 4MB!');
        //       }
        //       return isLt2M;
        //   },

        handleAvatarSuccess (res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload (file, item) {
            const isLt3M = file.size / 1024 / 1024 < 3;
            if (!isLt3M) {
                this.$message.error('上传头像图片大小不能超过 3MB!');
            }
            if (isLt3M) {


                let formData = new FormData();
                formData.append("file", file);
                fileUpload(formData).then(res => {
                    console.log(res, '我是路径')
                    if (res.status == 200) {
                        let path = res.data.href
                        item.value = path
                    }
                }).catch(response => {
                    console.log('图片上传失败')
                    this.imageError = true
                    this.$message.error('图片上传失败，请重新上传');
                })
            }
        },

        goRequest () {
            console.log('上传成功');
        },
        modifyFreight (row) {
            console.log('当前行数据信息---', row)
            this.freight = row.freight
            this.form.order_id = row.order_id
            this.form.tc_id = row.tc_id
            //this.form.id = row.task_id
            this.dialogInfo.width = "500px"
            this.dialogInfo.type = "modifyFreight"
            this.dialogInfo.visible = true;
            console.log('修改运费表单数据----', this.form)
        },
        confirmBill () {
            if (this.addId.length == 0) {
                this.$message({ type: "error", message: '请勾选需要发起对账的任务' });
                return
            }
            this.settlement_time = this.getonemonth()
            this.dialogInfo.width = "500px"
            this.dialogInfo.type = "confirmBill"
            this.dialogInfo.visible = true;
        },

        confirmAccount () {
            if (this.addId.length == 0) {
                this.$message({ type: "error", message: '请勾选需要批量对账的任务' });
                return
            }
            this.settlement_time = this.getonemonth()
            this.dialogInfo.width = "500px"
            this.dialogInfo.type = "confirmAccount"
            this.dialogInfo.visible = true;
        },

        handleClose () {
            this.showtag = false;
        },
        unique (arr) {
            const res = new Map();
            return arr.filter(a => !res.has(a) && res.set(a, 1));
        },
        arrayAminusB (arrA, arrB) {
            return arrA.filter(v => !arrB.includes(v));
        },
        //enter 事件防止全局触发
        upenter () {
            var that = this;
            document.onkeydown = e => {
                //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
                if (e.keyCode === 13 && e.target.baseURI.match("receivableVerification") && !that.showInvoice && !that.showReconciliation && !that.showDestroy && !that.dialogInfo.visible) {
                    console.log("回车事件", that.dialogInfo.visible);
                    //回车后执行搜索方法
                    that.filterInfo.query.page = 1;
                    that.pageParm.query.page = 1;
                    that.init(that.filterInfo.query);
                }
            };
        },
        openWind () {
        },
        getHeight () {
            if (this.contentStyleObj.height == "100%") {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 195;
            } else {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 170 + 98;
            }
            this.pageParm.tableHeight = height + "px";
            var heighttwo = window.innerHeight - 0;
            this.tableHeight = heighttwo + "px";
        },
        // 重置table高度
        resetHeight () {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        fetTableHeight () {
            this.resetHeight().then(res => {
                this.pageParm.tableHeight = this.$refs.tableWrapper.getBoundingClientRect().height - 64
                // 设置最小高度，确保表格可以正常显示
                // this.tableH = Math.max(containerHeight - 10, 200); // 最小300px
            })
        },
        //获取本月月初 月末
        getonemonth () {
            var nowDate = new Date();
            var fullYear = nowDate.getFullYear();
            var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
            var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天
            return fullYear + "-" + month; //当月最后一天
        },
        //格式化年月日
        getFullDate (targetDate) {
            var D, y, m, d;
            if (targetDate) {
                D = new Date(targetDate);
                y = D.getFullYear();
                m = D.getMonth() + 1;
                d = D.getDate();
            } else {
                y = fullYear;
                m = month;
                d = date;
            }
            m = m > 9 ? m : "0" + m;
            d = d > 9 ? d : "0" + d;
            return y + "-" + m + "-" + d;
        },
        init (data) {
            this.loading = true;
            let formData = new FormData();
            formData.append('group_id', data.group_id);
            formData.append('bill_status', data.bill_status);
            formData.append('finish_start_time', data.finish_start_time);
            formData.append('finish_end_time', data.finish_end_time);
            formData.append('invoice_type_id', data.invoice_type_id);
            formData.append('bill_lading_number', data.bill_lading_number);
            formData.append('pfid', data.pfid);

            console.log('当前数据---', data)
            billList(formData).then(res => {
                this.showSummary = true;
                this.tableInfo.data = [];
                this.tableInfo.data = res.data.list;
                if (this.tableInfo.data.length === 0) {
                    this.dataText = "暂无数据";
                }
                this.pageParm.total = res.data.total;
                this.amount_freight_total = res.data.amount_to.amount_freight_total;
                this.amount_other_freight_total = res.data.amount_to.amount_other_freight_total;
                this.amount_to_total = res.data.amount_to.amount_to_total;
                this.loading = false;
            });

        },


        getCurrentDate () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        getCurrentMonth () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            return `${year}-${month}`;
        },


        //合计
        getSummaries (param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 3) {
                    sums[index] = "合计：";
                    return;
                }
                if (index === 11) {
                    sums[index] = this.amount_freight_total;
                    return;
                }
                if (index === 12) {
                    sums[index] = this.amount_other_freight_total;
                    return;
                }
                if (index === 13) {
                    sums[index] = this.amount_to_total;
                    return;
                }

            });
            this.$nextTick(() => {
                this.$refs.table.$refs.table.doLayout();
                this.$refs.table.$refs.table.bodyWrapper.scrollLeft = 0;
            });
            return sums;
        },

        getParamList () {
            getParam().then(res => {
                let {
                    group_id_list,//发布企业
                    bill_status_list, //任务状态
                    invoice_class, //税率
                    user_id_list

                } = res.data;
                group_id_list = group_id_list.map(v => {
                    return {
                        key: v.group_id,
                        value: v.group_name
                    };
                });
                bill_status_list = bill_status_list.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                invoice_class = invoice_class.map(v => {
                    let value = ''
                    if (v.tax_ratio == 0) value = v.type_name
                    else value = v.tax_ratio + '%' + v.type_name
                    return {
                        key: v.id,
                        value: value
                    };
                });
                user_id_list = user_id_list.map(v => {
                    return {
                        key: v.pfid,
                        value: v.real_name + v.phone
                    };
                });
                this.listTypeInfo.group_id_list = group_id_list;
                this.listTypeInfo.bill_status_list = bill_status_list;
                this.listTypeInfo.invoice_class = invoice_class;
                this.listTypeInfo.user_id_list = user_id_list;
            });
        },

        handleClick (event, data) {
            console.log(event, data);
            console.log('当前弹框情况---', event)
            switch (event) {
                case "close":
                    this.dialogInfo.btLoading = false;
                    this.dialogInfo.visible = false;
                    this.is_modify_tax = 0
                    this.modifyTaxRadioForm.tax_ratio = ''
                    this.modifyTaxRadioForm.modify_freight = ''

                    this.form.tc_id = []
                    this.form.order_id = ""
                    this.form.amount = ""
                    this.form.reason = ""
                    this.tabItemList = []
                    this.tabItemList2 = []
                    break;
                case "taxRadio":
                    this.modifyTaxRadioForm.tc_id = data.tc_id;
                    this.modifyTaxRadioForm.bill_lading_number = data.bill_lading_number;
                    this.modifyTaxRadioForm.container_number = data.container_number;
                    this.modifyTaxRadioForm.freight = data.freight;
                    this.modifyTaxRadioForm.tax_ratio_txt = data.tax_ratio == '0%' ? data.invoice_type_name : data.tax_ratio + data.invoice_type_name;
                    //this.modifyTaxRadioForm.tax_ratio_txt = data.tax_ratio + data.invoice_type_name;
                    this.modifyTaxRadioForm.invoice_type_id = data.invoice_type_id
                    this.modifyTaxRadioForm.origin_tax_ratio = data.origin_tax_ratio
                    // this.modifyTaxRadioForm.tax_ratio = data.tax_ratio + data.invoice_type_name;
                    //修改的税率可选项过滤掉这条任务的税率
                    this.modifyTaxRatio = [],
                        this.listTypeInfo.invoice_class.map(v => {
                            if (v.key != data.invoice_type_id) {
                                this.modifyTaxRatio.push(v)
                            }
                        });

                    this.dialogInfo.type = "modifyTaxRadio";
                    this.dialogInfo.visible = true;
                    break;
                case "confirm":
                    this.settlement_time = this.getonemonth()
                    this.dialogInfo.width = "500px"
                    this.dialogInfo.type = "confirmBill"
                    this.dialogInfo.visible = true;
                    data.tc_id.forEach(v => {
                        this.addId.push(v);
                    })
                    //this.addId.push(data.id)
                    break;
                case "save":
                    if (this.dialogInfo.btLoading) {
                        return;
                    } else {
                        this.dialogInfo.btLoading = true;
                    }
                    if (this.dialogInfo.type == "modifyTaxRadio") {
                        if (this.modifyTaxRadioForm.tax_ratio === "") {
                            this.$message({
                                type: "error",
                                message: "请选择发票税率"
                            });
                            this.dialogInfo.btLoading = false;
                        } else {
                            let modifyForm = new FormData();
                            //modifyForm.append('id', this.modifyTaxRadioForm.id)
                            this.modifyTaxRadioForm.tc_id.forEach(function (value, index) {
                                modifyForm.append(`tc_id[${index}]`, value);
                            });
                            modifyForm.append('invoice_type_id', this.modifyTaxRadioForm.invoice_type_id)
                            modifyForm.append('invoice_type_name', this.modifyTaxRadioForm.invoice_type_name)
                            modifyForm.append('tax_ratio', this.modifyTaxRadioForm.invoice_tax_ratio)

                            modifyRate(modifyForm)
                                .then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            type: "success",
                                            message: res.msg
                                        });
                                    } else {
                                        this.$message({
                                            type: "error",
                                            message: res.msg
                                        });
                                    }

                                    this.dialogInfo.btLoading = false;
                                    this.dialogInfo.visible = false;
                                    this.init(this.filterInfo.query);
                                })
                                .catch(err => {
                                    this.dialogInfo.btLoading = false;
                                    console.log(">>>>>err", err);
                                });
                        }
                    }
                    if (this.dialogInfo.type == "modifyFreight") {
                        if (this.form.amount === "") {
                            this.$message({
                                type: "error",
                                message: "请输入修改运费"
                            });
                            this.dialogInfo.btLoading = false;
                        } else {
                            let formData = new FormData();
                            this.form.tc_id.forEach(function (value, index) {
                                formData.append(`tc_id[${index}]`, value);
                            });
                            //formData.append('id', this.form.id)
                            formData.append('order_id', this.form.order_id)
                            formData.append('amount', this.form.amount)
                            formData.append('reason', this.form.reason)
                            modifyFreight(formData)
                                .then(res => {
                                    if (res.status == 200) {
                                        this.form.tc_id = []
                                        this.form.order_id = ""
                                        this.form.amount = ""
                                        this.form.reason = ""
                                        this.$message({
                                            type: "success",
                                            message: res.msg
                                        });
                                    }

                                    this.dialogInfo.btLoading = false;
                                    this.dialogInfo.visible = false;
                                    this.init(this.filterInfo.query);
                                })
                                .catch(err => {
                                    this.dialogInfo.btLoading = false;
                                    console.log(">>>>>err", err);
                                });
                        }
                    }
                    if (this.dialogInfo.type == "confirmBill") {
                        if (this.settlement_time == '' || this.settlement_time == null) {
                            this.$message.warning("请选择对账月份");
                        } else {
                            let formData = new FormData();
                            formData.append(`settlement_time`, this.settlement_time);
                            this.addId.forEach(function (value, index) {
                                formData.append(`tc_id[${index}]`, value);
                            });
                            sendAmount(formData).then(res => {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.addId = []
                                this.dialogInfo.btLoading = true;
                                this.dialogInfo.visible = false;
                                this.init(this.filterInfo.query);
                            }).catch(() => {
                                this.addId = []
                            });
                        }
                    }
                    if (this.dialogInfo.type == "confirmAccount") {
                        if (this.settlement_time == '' || this.settlement_time == null) {
                            this.$message.warning("请选择对账月份");
                        } else {
                            let formData = new FormData();
                            formData.append(`settlement_time`, this.settlement_time);
                            formData.append(`type`, 2)
                            this.addId.forEach(function (value, index) {
                                formData.append(`tc_id[${index}]`, value);
                            });
                            confirmAccount(formData).then(res => {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                                this.addId = []
                                this.dialogInfo.btLoading = true;
                                this.dialogInfo.visible = false;
                                this.init(this.filterInfo.query);
                            }).catch(() => {
                                this.addId = []
                            });
                        }
                    }
                    if (this.dialogInfo.type == "mixedCost") {
                        let formData = new FormData();
                        formData.append(`order_id`, this.mixedCostForm.order_id);
                        this.mixedCostForm.tc_id.forEach(function (value, index) {
                            formData.append(`tc_id[${index}]`, value);
                        });
                        //formData.append(`id`, this.mixedCostForm.task_id);
                        this.tabItemList.forEach(function (value, index) {
                            formData.append(`other_freight_list[${index}][amount]`, value.amount);
                            formData.append(`other_freight_list[${index}][value]`, value.value == null ? '' : value.value);
                            formData.append(`other_freight_list[${index}][field]`, value.field);
                            formData.append(`other_freight_list[${index}][field_name]`, value.field_name);
                            formData.append(`other_freight_list[${index}][type]`, value.type);
                        });

                        modifyMixedFreight(formData).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    message: res.msg,
                                    type: "success"
                                });
                            }
                            this.dialogInfo.btLoading = true;
                            this.init(this.filterInfo.query);
                            this.dialogInfo.visible = false;
                        }).catch(() => { });
                    }
                    break;
                case "search":
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                case "reset":
                    for (let i in this.filterInfo.query) {
                        this.filterInfo.query[i] = "";
                    }
                    this.filterInfo.query.page = 1;
                    this.filterInfo.query.limit = 20;
                    this.pageParm.query.page = 1;
                    this.pageParm.query.limit = 20;
                    let datas = {};
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                case "details":
                    this.$router.push({
                        path: "/orderPage",
                        query: {
                            id: Number(data.task_id),
                            bill_lading_number: data.bill_lading_number,
                        },
                    });
            }
        },
        handleEvent (event, data, label) {
            let datas = {};
            switch (event) {
                case "tableCheck":
                    this.allId = [];
                    this.allInfo = [];

                    data.forEach(v => {
                        if (v.bill_status == 10) {
                            if (this.billLading == '') this.billLading = v.bill_lading_number;
                            this.payId.push(v.id);
                            this.allInfo.push(v);
                        }
                    });
                    if (this.allInfo.length > 0) {
                        for (let i in this.allInfo) {
                            let j = Number(i) + 1;
                            if (j < this.allInfo.length) {
                                if (this.allInfo[i].group_type != this.allInfo[j].group_type) {
                                    this.isBill = true
                                    this.isAccount = true
                                    this.addId = [];
                                    return
                                } else {
                                    if (this.allInfo[i].group_type == 1) {
                                        this.isBill = false
                                        this.isAccount = true
                                    } else {
                                        this.isBill = true
                                        this.isAccount = false
                                    }
                                    this.allInfo[i].tc_id.forEach(vv => {
                                        this.addId.push(vv);
                                    })
                                }
                            } else {
                                if (this.allInfo[i].group_type == 1) {
                                    this.isBill = false
                                    this.isAccount = true
                                } else {
                                    this.isBill = true
                                    this.isAccount = false
                                }
                                this.allInfo[i].tc_id.forEach(vv => {
                                    this.addId.push(vv);
                                })
                            }
                        }
                    } else {
                        this.isBill = true
                        this.isAccount = true
                        this.addId = []
                    }
                    return

                    // this.addId = [];
                    // if (this.addId.length > 0) this.isBill = false
                    // else this.isBill = true
                    // data.forEach(v => {
                    //     if (v.bill_status == 10) {
                    //         if (this.billLading == '') this.billLading = v.bill_lading_number;
                    //         this.payId.push(v.id);
                    //         v.tc_id.forEach(vv => {
                    //             this.addId.push(vv);
                    //         })
                    //         this.isBill = false
                    //     }
                    // });
                    break;
                case "remoteSearch":
                    let formData = new FormData();
                    formData.append('real_name', data);
                    userList(formData).then(res => {
                        let {
                            user_id_list,
                        } = res.data;
                        user_id_list = user_id_list.map(v => {
                            return {
                                key: v.pfid,
                                value: v.real_name + v.phone
                            };
                        });
                        this.listTypeInfo.user_id_list = user_id_list;
                    });
                    break;
                case "rowClick":
                    break;
                // 分页改变当前页
                case "curPage":
                    if (!data) return;
                    this.pageParm.query.page = data;
                    this.filterInfo.query.page = data;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                // 分页列表
                case "pageSize":
                    if (!data) return;
                    this.pageParm.query.limit = data;
                    this.filterInfo.query.limit = data;
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                default:
                    break;
            }
        }
    },
    destroyed () {
        // window.removeEventListener("resize", this.getHeight);
    }
};
</script>
<style lang="scss">
.taskList_box_title {
    padding-bottom: 20px;
    line-height: 40px;
}

.taskList_box {
    width: 600px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-right: -10px;
    border: 1px solid #ddd;
    line-height: 47px;
    width: 623px;

    .el-col {
        height: 60px;
        line-height: 40px;
        padding: 10px 0;

        .el-input-number {
            width: 140px;
        }
    }
}

/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}

/* 去掉input尾部上下小箭头 end */
</style>
<style lang="scss" scoped>
.reason {
    padding: 10px;
    border: 1px solid #DADADA;
    border-radius: 4px;
    min-height: 80px;
}

.warnings {
    display: inline-block;
    margin-left: 4px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.dialogCss {
    ::v-deep .el-dialog__body {
        padding: 10px 20px;
    }
}


.pay_status_text {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #fff;
    cursor: pointer;
    margin-left: 3px;
}

.icon-box {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;

    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        color: #fff;
    }
}

.company {
    ::v-deep .el-radio {
        margin-top: 10px;
    }
}

.filtrate {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: #409eff;
    color: #ffffff;
    box-shadow: -1px 1px 4px 0 #f6900f;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
}

.filtrate:hover {
    cursor: pointer;
}

::v-deep .receivable {
    margin-left: 242px;
}

::v-deep .moneycss {
    width: 120px;
}

.editicon:hover {
    cursor: pointer;
}

.imgggcss {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.excelcss:hover {
    cursor: pointer;
}

::v-deep .excelcss>.el-image__inner {
    vertical-align: middle;
}

.salecss {
    white-space: nowrap;
    /*强制span不换行*/
    display: inline-block;
    /*将span当做块级元素对待*/
    width: 60px;
    /*限制宽度*/
    overflow: hidden;
    /*超出宽度部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分以点号代替*/
    line-height: 0.9;
    /*数字与之前的文字对齐*/
}

.salecss:hover {
    cursor: pointer;
}

.recordTable {
    display: flex;
    flex-direction: column;
}

.concatcss {
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.concatcss_line {
    width: 360px;
    border: 1px dashed #c8b9b9;
}

::v-deep.el-form-item {
    margin-bottom: 0px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__label {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner,
.concatcss>.el-form-item>.el-form-item__content {
    height: 30px !important;
    line-height: 30px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-select>.el-input>.el-input__inner,
.el-form-item__content>.filter-input>.el-input__inner {
    width: 200px;
    height: 30px;
    font-size: 12px !important;
}

.moredestroyCss {
    ::v-deep.el-form-item {
        margin-bottom: 20px !important;
    }

    ::v-deep .el-input {
        width: 240px !important;
    }

    ::v-deep .el-input__inner {
        width: 240px !important;
    }

    .item {
        width: 330px;
        margin-top: 15px;

        &-title {
            font-size: 13px;
            color: #9BA2AA;
            padding-left: 15px;
            padding-bottom: 5px;
        }

        &-main {
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed #000;

            &-line {
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
            }

            &-title {
                width: 80px;
                color: #606266;
                font-size: 12px;
                font-weight: 700;

            }

            &-box {
                font-size: 12px;
                color: #606266;

                ::v-deep .el-input__inner {
                    width: 200px !important;
                }

                ::v-deep .el-input {
                    width: 200px !important;
                }
            }
        }
    }
}

.bgfff {
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bgfffs {
    background: #fff;
}

.tableHeight {
    flex: 1;
    box-sizing: border-box;
}

.filter_box {
    position: relative;
    // height: 64px;
    overflow: hidden;
    padding-right: 10px;

    .open {
        position: absolute;
        top: 10px;
        right: 20px;
        color: #409EFF;
        cursor: pointer;
    }
}

.app-main {
    padding-top: 90px !important;
}

.container-box {
    background: #f5f7fa;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
}

::v-deep .pagination-container {
    margin-top: 0 !important;
}

::v-deep .demo-image__error {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 12px;
    background: #F5F7FA;
    color: #C0C4CC;
    vertical-align: middle;
    height: 48px;
}
</style>